<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var items = document.getElementsByName('items')
            var checkedAllButton = document.getElementById('checkedAllButton')
            checkedAllButton.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = true
                }
                checkedALLbox.checked = true
            }

            var checkedNoButton = document.getElementById('checkedNoButton')
            checkedNoButton.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = false
                }
                checkedALLbox.checked = false
            }

            var checkedRevButton = document.getElementById('checkedRevButton')
            checkedRevButton.onclick = function () {
                checkedALLbox.checked = true
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = !items[i].checked
                    if (!items[i].checked) {
                        checkedALLbox.checked = false
                    }
                }
            }

            var sendButton = document.getElementById('sendButton')
            sendButton.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        alert(items[i].value)
                    }
                }
            }
            var checkedALLbox = document.getElementById('checkedALLbox')
            checkedALLbox.onclick = function () {
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = this.checked
                }
            }
            for (var i = 0; i < items.length; i++) {
                items[i].onclick = function () {
                    checkedALLbox.checked = true
                    for (var j = 0; j < items.length; j++) {
                        if (!items[j].checked) {
                            checkedALLbox.checked = false
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedALLbox">全选/全不选
    <br>
    <input type="checkbox" name="items" value="足球">足球
    <input type="checkbox" name="items" value="篮球">篮球
    <input type="checkbox" name="items" value="排球">排球
    <input type="checkbox" name="items" value="网球">网球
    <br>
    <input type="button" id="checkedAllButton" value="全选">
    <input type="button" id="checkedNoButton" value="全不选">
    <input type="button" id="checkedRevButton" value="反选">
    <input type="button" id="sendButton" value="提交">

</form>
</body>
</html>